<template>
	<div class="content">
    <!--头部-->
 	<my-header :title="'我的收藏'" :hasTitle="true" :hasBack="true" ></my-header>
    <div style="flex: 1;overflow-y: auto;">
    	<div style="height:1rem;"></div>
	    <div class="centent top_div">
	      <!--商品列表-->
	      <div class="aui-content">
	        <ul class="aui-list aui-media-list commodity_list subtotal_list">
	          <!--<li class="aui-list-item">
	            <div class="aui-list-item-inner">
	              收藏记录
	              <div class="aui-pull-right text_c_gray">共{{collectIdInfor ? collectIdInfor.length : 0}}件</div>
	            </div>
	          </li>-->
	          <li class="aui-list-item" v-if="item.goodsVO != null" v-for="(item,index) in collectIdInfor"
	              @click="goDetail(item,item.goodsCode)" :key="index">
	            <div class="aui-media-list-item-inner" >
                    <!-- v-if="item.goodsOnOff == 0" -->
                  <div class="gaizhang"   v-if="item.goodsVO.goodsOnOff == 0" >
                      已下架
                  </div>
                  <!-- <div v-if="item.goodsVO.goodsOnOff == 0" style="width: 3rem;display: flex;justify-content: center;align-items: center;padding-right: 0.75rem;color:#9a9a9a;" >  
                      失效
                  </div> -->
	              <div class="aui-list-item-media" style="width:4.3125rem;height:4.3125rem " >
	                <!--<img :src="item.goodsVO.imageURL || 'static/image/demo1.png'">-->
	                <img v-lazy="item.goodsVO.imageURL || 'static/image/demo2.png'">
	                
	              </div>
	              <div class="aui-list-item-inner suggest" style="height:1.9rem">
	                <h3 style="text-align: left;min-height:1rem;width: 71%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
	                	{{item.goodsVO.goodsName}}</h3>
	                <p style="text-align: left;">{{item.goodsVO.goodsSpec ? "规格:" + item.goodsVO.goodsSpec : "&nbsp;"}}</p>
	                <p style="text-align:left;color:#999999;text-decoration:line-through" v-if="(item.goodsVO.normalPrice || item.goodsVO.normalPrice==0)&&compareValue(item.goodsVO) ">
						<span class="prices_text" style="color:#999999;" v-if="item.goodsVO.goodsType == 7 || item.goodsVO.goodsType == 6">¥{{((item.goodsVO.normalPrice)/2).toFixed(2) || item.goodsVO.normalPrice==0}}</span>
						<span class="prices_text" style="color:#999999;" v-else>¥{{item.goodsVO.normalPrice.toFixed(2) || item.goodsVO.normalPrice==0}}</span>
	                </p>
	                <p style="float: left;" v-if="item.goodsVO.wsPrice || item.goodsVO.wsPrice==0"><span
	                  class="prices_text">¥<em>{{item.goodsVO.wsPrice || item.goodsVO.wsPrice==0?queryPriceData(item.goodsVO): ""}}</em></span>/{{queryUnitData(item.goodsVO) || "件"}}
	                </p>
	                <div class="del-button" style="float: right;" @click.stop="deleteCollect(item.goodsCode)">
	                	<i class="icon njfont nj-shanchu"></i>
	                </div>
	              </div>
	            </div>
	          </li>
	        </ul>
	        <!--<div @click="showPop">
	          	点击弹出
	        </div>-->
	        <div class="no_data" v-if="collectIdInfor && collectIdInfor.length <= 0  || !collectIdInfor">
	          <img src="static/image/no_collection.png">
	          <p>暂无收藏的商品</p>
	          <div class="back_home aui-btn aui-btn-outlined" @click="$router.push('home')">逛逛首页</div>
	        </div>
	      </div>
	      <!--商品列表 end-->
	    </div>
    </div>
    <!--:shoreList="shoreList" :addressList="addressList"-->
    <!--<top-popup :isShow="isShow"></top-popup>-->

  </div>
</template>

<script>
	import MyHeader from "../header";
//	import {queryCollect,deleteCollect} from '../../api/zxApi.js';
	import {Toast} from '../../utils/toast.js';
	import { mapMutations, mapActions, mapGetters } from "vuex";
  	import {MessageBox} from '../../ui-components';
  	import axios from 'axios';
  	import collectBtn from './collectBtn'
	import {showLoading, hideLoading} from "../../utils/loading";

	import TopPopup from '../../real-components/topPopup';
	 export default {
	 	data () {
	      return {
	        collectIdList: null,
	        collectIdInfor: null,
	        isShow:false,
	      }
	    },
	    components: {
	    	"collect-btn": collectBtn,
	    	"my-header":MyHeader,
	    	"TopPopup":TopPopup
	    },
	    computed: {
	   		...mapGetters('wxh',[
				'sessionId',
				'userInfo'
			])
	    },
	    created(){
	    	this.getCollectData();
	    },
	    mounted () {

	    },

	    methods:{
	    	...mapActions('wxh', [
			  'getUserInfo'
			])
			,
			...mapMutations('wxh', [
			  'USER_INFO',
			  'ClEAR_SESSIONID',
			  'LOGO_OUT',
			  'LOGO_IN',
			  'CLEAR_INFO'
			])
			,
			showPop(){
				if(this.isShow){
					this.isShow = false;
				}else{
					this.isShow = true;
				}
			},
		    goDetail (item,data) {
                // goodsOnOff  0代表下架商品  1 代表上架商品
                if(item.goodsVO.goodsOnOff == 0){
                    Toast({
                        message: "该商品已下架",
                        type: 'warn',
		            });
                }else{
		            this.$router.push({path:'detail',query: {code:data}});
                }
		    },
			getCollectData(){
				var that = this;

//				"http://test.vmgoods.scn.weilian.cn/collection/goods?storeCode=1613"
			    var sessionId = this.sessionId;
			    if (this.sessionId) {
			        //请求数据
			        showLoading();
			        let params = {
			        	storeCode:localStorage.getItem('storeCode'),
			        	usePlatform:"WAP"
			        }
//			        console.log(api,'api.queryCollect');
			        axios({
			            url: window.api.goods_host + "/collection/goods",
			            method: "get",
			            params,
			            headers: {"sessionId": sessionId},
			          }
			        ).then((data) => {
			        	console.log(data.data.data,'配送')
			          var data = data.data.data;
			          //获取全部商品数据的方法
			          hideLoading();
			          that.collectIdInfor = data;
//			          console.log("this.collectInfro",that.collectIdInfor)
//			          console.log("callll", that.collectIdInfor)
			        }).catch(
			          this.collectIdInfor = null
			        )
			    } else {
			        //弹出未登录提示 点击返回上一页
			        // MessageBox.alert('请登录后再进入收藏页', '未登录').then(
			        //   (data) => {
			        //     this.$router.push("login");
			        //   }
			        // )

                    MessageBox.confirm('请先登录！')
                    .then(action => {
                        this.$router.push({path: 'login',query: {page: 1}});
                    })
                    .catch(error => {
                        console.log(error);
                    })
			    }
			},
			queryPriceData(val){
				//处理价格数据
				var showPrice = val.wsPrice;
				if(val.goodsType==6||val.goodsType==7){
					if(val.goodsUnit=='kg'||val.goodsUnit=='KG'||val.goodsUnit=='Kg'||val.goodsUnit=='kG'){
						showPrice = parseFloat(showPrice * 0.5).toFixed(2)
					}else if(val.goodsUnit=='g'||val.goodsUnit=='G'){
						showPrice = parseFloat(showPrice * 500).toFixed(2)
					}else{
						showPrice = parseFloat(showPrice).toFixed(2)
					}
				}else{
					showPrice = parseFloat(showPrice).toFixed(2)
				}

				return showPrice
			},
			queryUnitData(val){
				//处理商品单位数据
				var showUnit = val.mallUnit
				if(val.goodsType==6||val.goodsType==7){
					showUnit = '500g'
				}

				return showUnit
			},
			deleteCollect(goodsCode){
				MessageBox.confirm('确认移除收藏吗？')
                .then(action => {
                    var that = this;
                    let params = {
                        storeCode:localStorage.getItem('storeCode'),
                        goodsCodeStr:goodsCode
                    }
                    axios({
                    url: window.api.goods_host + "/collection/goods",
                    headers: {"sessionId": that.sessionId},
                    method: "DELETE",
                    params
                    }).then((res) => {
                    console.log(res.data.returnCode,'移除')
                        if(res.data.returnCode == 1){
                            Toast({
                                message: "移除成功",
                                type: 'success'
                            });
                            //请求数据
                            this.getCollectData();
                        }else{
                            Toast({
                                message: "移除失败",
                                type: 'fail'
                            });
                        }
                    
                    })
                })
                .catch(error => {
                    console.log(error);
                })
			},
			compareValue(val){
				if(val.normalPrice == val.wsPrice){
					return false
				}else{
					return true
				}
			}
	    }

	 }
</script>

<style scoped="scoped">
	.no_data{
		margin: auto;
		position: absolute;
		padding: 3rem;
		top: 3rem; left: 0; bottom: 0; right: 0;
	}
	.no_data img {
	    width: 60vw;
	    margin: 0 auto;
	}
	/*.subtotal_list .aui-list-item-media {
	    width: 22vw;
	    height: 22vw;
	}*/
	.aui-searchbar, .aui-bar-nav {
		position: relative;
	    left: 0;
	    top: 0;
	    z-index: 12;
	}
	.content {
	    width: 100%;
	    height: 100%;
	    display: flex;
	    flex-direction: column;
	    justify-content: space-between;
	}
    .gaizhang {
        position: absolute;
        left: 70%;
        top: 36%;
        border: 1px solid #EF5423;
        padding: 0.1rem 0.6rem;
        color: red;
        transform: rotate(-40deg);
        opacity: 0.5;
    }

</style>
